<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>安心运</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- vendor source -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="js/lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/lib/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="js/lib/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="js/lib/bootstrap-table/dist/bootstrap-table.min.css">
    <script src="js/lib/jquery-1.9.1/jquery.min.js"></script>
    <script src="js/lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script src="js/lib/moment/min/moment-with-locales.min.js"></script>
    <script src="js/lib/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
    <script src="js/lib/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="js/lib/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="js/lib/mustache/mustache.min.js"></script>
    <script src="js/lib/layer-v2.2/layer/layer.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=ryGGzhrZxutxxgj6q4TPjUGq"></script>
    <!-- thrift source -->
    <script type="text/javascript" src="js/thrift/thrift.js"></script>
    <script type="text/javascript" src="js/thrift/Type_types.js"></script>
    <script type="text/javascript" src="js/thrift/Content_types.js"></script>
    <script type="text/javascript" src="js/thrift/TContentService.js"></script>
    <script type="text/javascript" src="js/thrift/Geo_types.js"></script>
    <script type="text/javascript" src="js/thrift/File_types.js"></script>
    <script type="text/javascript" src="js/thrift/User_types.js"></script>
    <script type="text/javascript" src="js/thrift/TUserService.js"></script>
    <script type="text/javascript" src="js/thrift/User_types.js"></script>
    <script type="text/javascript" src="js/thrift/TUserService.js"></script>
    <script type="text/javascript" src="js/thrift/TruckTrack_types.js"></script>
    <script type="text/javascript" src="js/thrift/TTransportService.js"></script>
    <!-- common service js -->
    <script src="js/main.js"></script>
    <!-- seperate view css source -->
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!-- header -->
    <div class="header clearfix">
      <div class="pull-left header-title">安心运车辆运输监控系统</div>
      <div class="pull-right">
        <div class="btn-top">
          <a href="javascript:;" class="btn btn-success">修改密码</a>
          <a href="javascript:;" class="btn btn-danger">退出</a>
        </div>
      </div>
    </div>

    <!-- navigator -->
    <ul class="nav nav-tabs">
      <li role="presentation"><a href="index.html">实时运输</a></li>
      <li role="presentation"><a href="archive.html">运输档案</a></li>
      <li role="presentation"><a href="sysMgt.html">系统管理</a></li>
    </ul>

    <!-- main content -->
    <div class="main index-content">
      <div class="content-left pull-left">
        <div class="left-header">在途车辆</div>
        <div class="panel-group" id="track_accordion" role="tablist" aria-multiselectable="true">
        </div>
      </div>
      <div class="content-main">
        <div class="right-header">
          <!-- <a href="javascript:;" class="btn btn-sm btn-info">实时监控</a> -->
          <a class="btn btn-sm btn-info" data-toggle="modal" data-target="#internalTimeModal" id="open-config-btn">
            停滞时间设置
          </a>
        </div>
        <div class="map-container" id="bdmap_container"></div>
        <table id="notification-table" class="table"></table>
      </div>
    </div>

    <!-- bootstarp modals -->
    <!-- 停滞时间设置modal -->
    <div class="modal fade" id="internalTimeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">
              停滞时间设置
            </h4>
          </div>
          <div class="modal-body">
            <form id="alert-config">
              <div class="form-group">
                <label for="warning">是否设置超时告警</label>
                <select name="warning" class="form-control" id="warning">
                  <option value="1">是</option>
                  <option value="0">否</option>
                </select>
              </div>
              <div class="form-group">
                <label for="otSeconds">允许单次停车时间</label>
                <input type="text" class="form-control" name="otSeconds" id="otSeconds" placeholder="请填写数字,单位为分钟">
              </div>
              <div class="form-group timepicker-container">
                <label>设置不告警时段</label>
                <button type="button" id="alert-except-btn" class="btn btn-sm btn-default ml20">添加</button>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-sm btn-primary" id="submit-alert-btn">
              提交
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- panel template -->
    <script id="panel" type="text/template">
      {{#data}}
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <button type="button" class="btn btn-sm btn-success pull-right focus-track-btn" onclick="poiFocus(event, {{id}})">
            定位
          </button>
          <h4 class="panel-title">
            <div class="clearfix" role="button" data-toggle="collapse" data-parent="#accordion" data-target="#{{id}}" aria-expanded="false" aria-controls="{{id}}">
              <span>{{truck.licNumber}}</span>
            </div>
          </h4>
        </div>
        <div id="{{id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            <div class="truck-info-item clearfix">
              <label>运输批次:</label>
              <span>{{no}}</span>
            </div>
            <div class="truck-info-item clearfix">
              <label>运输车辆:</label>
              <span>{{truck.licNumber}}</span>
            </div>
            <div class="truck-info-item clearfix">
              <label>驾驶员:</label>
              <span>{{driver.name}}</span>
            </div>
            <div class="truck-info-item clearfix">
              <label>手机号码:</label>
              <span>{{driver.mobile}}</span>
            </div>
            <div class="truck-info-item clearfix">
              <label>载货量:</label>
              <span>{{#realCapacity}} {{realCapacity}}吨 {{/realCapacity}}</span>
            </div>
            <div class="truck-info-item clearfix">
              <label>发货地点:</label>
              <span>{{deliverAddress.name}}</span>
            </div>
            <div class="truck-info-item clearfix">
              <label>收货地点:</label>
              <span>{{deliverAddress.name}}</span>
            </div>
            <div class="truck-info-item clearfix">
              <label>发货时间:</label>
              <span>{{deliverDate}}</span>
            </div>
          </div>
        </div>
      </div>
      {{/data}}
    </script>
    <!-- datetimepicker template -->
    <script id="timepicker" type="text/template">
      <div class="form-control-static" style="position: relative">
        <input type="text" name="startTime" class="datetimepicker form-control">
          至
        <input type="text" name="endTime" class="datetimepicker form-control">
        <button type="button" class="btn btn-sm btn-default ml20 del-btn">删除</button>
      </div>
    </script>

    <script>
      var tableColumnData = [
        {
          field: 'transport.id',
          title: '运输批次'
        },
        {
          field: 'noticeAt',
          title: '通知时间'
        },
        {
          field: 'type',
          title: '通知类型'
        },
        {
          field: 'content.content',
          title: '通知内容'
        },
        {
          field: 'transport.truck.licNumber',
          title: '运输车辆'
        },
        {
          field: 'transport.driver.name',
          title: '驾驶员'
        },
        {
          field: 'transport.driver.mobile',
          title: '手机号'
        },
        {
          field: 'operation',
          title: '操作',
          formatter: function() {
            return '<a class="operation pointer read btn btn-success">' + '已读' + '</a>';
          },
          events:  {
            'click .read': function (e, value, row, index) {
              contentClient.updateContentStatus(0, [row.id], 0, function(res) {
                $('#notification-table').bootstrapTable('remove', {
                  field: 'id',
                  values: [row.id]
                });
              })
            }
          }
        },
      ];
    </script>
    <script>
      function poiFocus(event, index) {
        var $target = $(event.target),
            targetTxt = $target.text().trim(),
            trackFlag = false;
        if (targetTxt == '定位') {
          $('.focus-track-btn').text('定位');
          $target.text('取消定位');
          trackFlag = true;
        } else {
          $target.text('定位');
          trackFlag = false;
        }
        for (var i=0, l=trackList.length; i<l; i++) {
          var trackItem = trackList[i];
          if (trackItem.id == index) {
            trackItem.focus = true;
          } else {
            trackItem.focus = false;
          }
        }
      }
      var _this = null;
      var indexCtrl = _this = {
        data: {
          pois: {}
        },
        initViewMethods: {
          initBdMap: function() {
            var me = indexCtrl;
            window.map = new BMap.Map("bdmap_container");
            // map.enableScrollWheelZoom(true)
            map.addControl(new BMap.NavigationControl());
            map.addControl(new BMap.ScaleControl());
            var point = new BMap.Point(118.776053, 31.981437);
            map.centerAndZoom(point, 15);
          },
          initTackPanel: function() {
            getOnlineTrucks();

            function getOnlineTrucks() {
              client.queryTransportation(new TruckTrack.TTransportationQuery({
                status: TruckTrack.TTransportationStatus.ON_THE_WAY
              }), function(res) {
                console.log(res);
                window.trackList = res.items;
                $.each(trackList, function(index, value) {
                  if (value.deliverDate) {
                    value.deliverDate = js_date_time(value.deliverDate);
                  }
                })
                var panelHtmlStr = $('#panel').html();
                var container = $('#track_accordion');
                var resHtmlStr = Mustache.render(panelHtmlStr, {
                  data: trackList
                });
                container.append(resHtmlStr);

                if (trackList && trackList.length) {
                  setInterval(getLatestPois, 5000);
                }
              });
            }

            function getLatestPois() {
              client.mgetLatestTracks([], function(res) {
                console.log(res);

                for (var key in res) {
                  for (var i=0, l=trackList.length; i<l; i++) {
                    var trackItem = trackList[i];
                    if (trackItem.id == key) {
                      var point = res[key].point;

                      //坐标转换完之后的回调函数
                      translateCallback = function (data){
                        if(data.status === 0) {
                          trackItem.point = data.points[0];
                          if (!trackItem.marker) {
                            var myIcon = new BMap.Icon("img/car_icon.png", new BMap.Size(32, 70));
                            var carMk = new BMap.Marker(trackItem.point, {icon:myIcon});
                            trackItem.marker = carMk;
                            map.addOverlay(carMk);
                          } else {
                            trackItem.marker.setPosition(trackItem.point);
                            if (trackItem.focus) {
                              map.centerAndZoom(trackItem.point, 15);
                            }
                          }
                        }
                      }
                      var convertor = new BMap.Convertor();
                      var pointArr = [];
                      pointArr.push(point);
                      convertor.translate(pointArr, 1, 5, translateCallback);
                    }
                  }
                }
                console.log(trackList);

                function resetMkPoint(id){
                  var point = new BMap.Point(res[id].point.lng, res[id].point.lat)
                  carMk.setPosition(point);
                  map.centerAndZoom(point, 15);
                }
                // setInterval(function(){
                //   resetMkPoint();
                // }, 200);
                // function addMarker(point, index){
                //   var marker = new BMap.Marker(point);

                //   var title = trackTrucksData[index].lisence;
                //   var content = '驾驶员:' + trackTrucksData[index].detail.driver + '  手机:' + trackTrucksData[index].detail.tell;
                //   map.addOverlay(marker);
                //   var opts = {
                //     width : 100,     // 信息窗口宽度
                //     height: 30,     // 信息窗口高度
                //     title : title  // 信息窗口标题
                //   }
                //   var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
                //   marker.addEventListener("click", function(){
                //     map.openInfoWindow(infoWindow,point); //开启信息窗口
                //   });
                // }
              });
            }
          },
          initDatetimePicker: function() {
            $('.datetimepicker').datetimepicker({
              locale: 'zh-cn',
              format: 'HH:mm'
            });
          },
          initAlertPanel: function() {
            var data = {
              tsNo:null
              // pageable:{
              //   pageNumber:0,
              //   pageSize:10
              // }
            };
            client.queryTsNotice(new TruckTrack.TTsNoticeQuery(data), function(res){
              console.log(res);
              var items = res.items;
              for (var i=0, l=items.length; i<l; i++) {
                var item = items[i];
                item.noticeAt = js_date_time(item.noticeAt);
                item.type = item.type == 0 ? '通知' : item.type == 1 ? '告警' : '未知';
              }
              var $table = $('#notification-table');
              $table.bootstrapTable({
                columns: tableColumnData,
                data: res.items,
                pagination: true,
                pageSize: 10
              });
            });
          }
        },
        initEventHandlers: {
          addDatePickerHandler: function() {
            $('#alert-except-btn').click(function(e) {
              var $container = $(e.target.parentNode);
              var pickerHtmlStr = $('#timepicker').html();
              $container.append(pickerHtmlStr);
              indexCtrl.initViewMethods.initDatetimePicker();
            });
          },
          removeDatePickerHandler: function() {
            $('.timepicker-container').on('click', '.del-btn', function(e) {
              $(e.target).parent().remove();
            });
          },
          submitAlertConfigHandler: function() {
            $('#submit-alert-btn').click(function() {
              var formData = $('#alert-config').serializeObject();
              formData.warning = formData.warning == '1' ? true : false;
              if (formData.startTime && formData.startTime instanceof Array) {
                formData.ignoredRegions = [];
                for (var i=0, l=formData.startTime.length; i<l; i++) {
                  formData.ignoredRegions.push({
                    fromDate: formData.startTime[l],
                    toDate: formData.endTime[l]
                  });
                }
              } else if (formData.startTime) {
                formData.ignoredRegions = [];
                formData.ignoredRegions.push({
                  fromDate: formData.startTime,
                  toDate: formData.endTime
                });
              }
              client.saveOvertimeConfig(new TruckTrack.TOvertimeConfig(formData), function(res) {
                console.log(res);
                layer.msg('成功');
                $('#internalTimeModal').modal('hide');
              });
            });
          },
          initAlertConfigModal: function() {
            $('#open-config-btn').click(_this.methods.initOvertimeConfigModal);
          }
        },
        methods: {
          addDatePickerWithData: function(startTime, endTime) {
            var $container = $('.timepicker-container');
            var pickerHtmlStr = $('#timepicker').html();
            $container.append(pickerHtmlStr);
            indexCtrl.initViewMethods.initDatetimePicker();

            var inputsOuter = $container.find('.form-control-static:last');
            if (startTime) {
              inputsOuter.find('input[name=startTime]').val(startTime);
            }
            if (endTime) {
              inputsOuter.find('input[name=endTime]').val(endTime);
            }
          },
          initOvertimeConfigModal: function() {
            var $container = $('.timepicker-container');
            $container.find('.form-control-static').remove();
            client.getOvertimeConfig(null, function(res) {
              console.log(res);
              if (res.warning) {
                $('#warning option[value="1"]').attr('selected', 'selected');
              } else {
                $('#warning option[value="0"]').attr('selected', 'selected');
              }
              if (res.otSeconds) {
                $('#otSeconds').val(res.otSeconds);
              }
              if (res.ignoredRegions && res.ignoredRegions.length) {
                for (var i=0, l=res.ignoredRegions.length; i<l; i++) {
                  _this.methods.addDatePickerWithData(res.ignoredRegions[i].fromDate, res.ignoredRegions[i].toDate);
                }
              }
            })
          }
        },
        bootstrap: function() {
          var initViewMethods = this.initViewMethods;
          var initEventHandlers = this.initEventHandlers;
          for (var key in initViewMethods) {
            initViewMethods[key]();
          }
          for (var key in initEventHandlers) {
            initEventHandlers[key]();
          }
          setInterval(function() {
            $('#notification-table').bootstrapTable('destroy');
            initViewMethods.initAlertPanel();
          }, 10000);
        }

      };

      $(function() {
        indexCtrl.bootstrap();
      });
    </script>
  </body>
</html>
